import { Card,Form, Input, Button, Checkbox, message } from 'antd';
import logo from '../../assets/logo.png'
import './index.scss'
import {login} from '@/api'
import { setToken } from '@/utils';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { loginAction } from '@/store/actions';
type FormDate={
  mobile:string;code:string;remember:boolean
}
const Login = () => {

   const history= useHistory()
      const dispatch= useDispatch()
   const  onFinish =async (values: FormDate) => {

    // 表单校验成功
    // 发送请求    
    const {mobile,code} = values
      
    // 判断一下请求是否成功
      await dispatch(loginAction(mobile,code))
      // 提示弹出提示
      message.success('登录成功')
      // 跳转页面
      history.push('/home')
    
    
    
  };
  const onFinishFailed = (errorInfo: any) => {
  };
  return (
    <div className='login'>
      <Card className='login-container'>
        <img className='login-logo' src={logo} alt='' />
        {/* 登录表单 */}
        <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 24 }}
      initialValues={{ remember: true, mobile: '13911111111', code: '246810' }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      //设置触发时机
      validateTrigger={['onChange','onBlur']}
    >
      <Form.Item
        name="mobile"
        rules={[
        { required: true, message: '手机号不能为空!' },
        //设置验证的规则
        {pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,message:'手机格式错误，请重试'}]}
      >
        <Input size='large' />
      </Form.Item>

      <Form.Item
        name="code"
        rules={[
          { required: true, message: '验证码不能为空格!' },
          {pattern:/^\d{6}$/,message:'验证码格式错误，请重试'}]}
      >
        <Input size='large'/>
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ span: 24 }} rules={[
          {
            validator: (_, value) =>
              value ? Promise.resolve() : Promise.reject(new Error('请勾选用户协议')),
          },
        ]}>
        <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{  span: 24 }}>
        {/* htmoType属性：调用表单的提交功能 */}
        <Button type="primary" htmlType="submit" size='large' block >
          登陆
        </Button>
      </Form.Item>
    </Form>
      </Card>
    </div>
  )
}

export default Login
